<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <jsp:include page="/resources/inc/head.jsp" />
    <style>
        .dict {
        }

        .dict .layui-form-item {
            margin: 0px;
        }

        .dict .layui-inline {
            width: 45%;
        }
    </style>
</head>
<body>
<script>
    var addDiv = function () {
        $("#add_a").before(div);
    }
    var deleteDiv = function (a) {
        var divs = $("div [name='div']");
        if (divs.length == 1) {
            layer.msg("至少保留一个字段");
            return;
        }
        $(a).parent().remove();
    }
</script>
<form class="layui-form layui-form-pane" id="_form">
    <div class="layui-form-item">
        <label class="layui-form-label">key</label>
        <div class="layui-input-block">
            <input type="text" name="key" lay-verify="required" autocomplete="off" placeholder="请输入字典的key"
                   class="layui-input" value="${dictList[0].key}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input type="text" name="description" lay-verify="required" autocomplete="off" placeholder="请输入字典的描述"
                   class="layui-input" value="${dictList[0].description}">
        </div>
    </div>
    <div class="dict">
        <a id="add_a" onclick="addDiv()" href="javascript:void(0);">
            <i class="layui-icon" style="font-size: 25px; color: black;">&#xe654;</i>
        </a>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
        </div>
    </div>
</form>
<jsp:include page="/resources/inc/footer.jsp" />
<script>
    var div = '<div class="layui-form-item" name="div">' +
            '<div class="layui-inline">' +
            '<label class="layui-form-label">字段名称</label>' +
            '<div class="layui-input-block">' +
            '<input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input">' +
            '</div>' +
            '</div>' +
            '<div class="layui-inline">' +
            '<label class="layui-form-label">值</label>' +
            '<div class="layui-input-block">' +
            '<input type="text" name="value" lay-verify="required" autocomplete="off" class="layui-input"> ' +
            '</div>' +
            '</div>' +
            '<a onclick="deleteDiv(this)" href="javascript:void(0);">' +
            '<i class="layui-icon"  style="font-size:25px;color:black;">&#xe640;</i>' +
            '</a>' +
            '</div>';
    var oldKey = "${dictList[0].key}";
    var url = '${basePath}/manage/product/dict/update';
    var index = parent.layer.getFrameIndex(window.name);
    commonSubmit(url, "sub", index);
    function getFormData(data) {
        var dictList = [];
        var key = $("input[name='key']");
        var description = $("input[name='description']");
        var value = $("input[name='value']");
        var name = $("input[name='name']");
        for (var i = 0; i < value.length; i++) {
            dictList.push({key: key.val(), description: description.val(), value: value[i].value, name: name[i].value})
        }
        var data = {dictList: dictList, oldKey: oldKey};
        return JSON.stringify(data);
    }
    $(function () {
        <c:forEach items="${dictList}" var="dict">
        $("#add_a").before('<div class="layui-form-item" name="div">' +
                '<div class="layui-inline">' +
                '<label class="layui-form-label">字段名称</label>' +
                '<div class="layui-input-block">' +
                '<input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input" value="${dict.name}">' +
                '</div>' +
                '</div>' +
                '<div class="layui-inline">' +
                '<label class="layui-form-label">值</label>' +
                '<div class="layui-input-block">' +
                '<input type="text" name="value" lay-verify="required" autocomplete="off" class="layui-input" value="${dict.value}"> ' +
                '</div>' +
                '</div>' +
                '<a onclick="deleteDiv(this)" href="javascript:void(0);">' +
                '<i class="layui-icon"  style="font-size:25px;color:black;">&#xe640;</i>' +
                '</a>' +
                '</div>');
        </c:forEach>
    });
</script>
</body>
</html>
